<template>
    <div class="management1">
        <div class="margin-up-down">
            <Button type="info" @click='addPayment("formValidate")'>
                <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
            </Button>
        </div>
        <div class="margin-up-down">
            <!-- <fourLevelLinkage
                @changeProvince="changeProvince"
                @changeCity="changeCity"
                @changeArea="changeArea"
                @changeHospital="changeHospital"
                :province="province"
                :city="city"
                :area="area"
                :hospital="hospital"
                :isBack="isBack"
            ></fourLevelLinkage> -->
        </div>
        <div class="margin-up-down">
            <Input
                v-model.trim="val"
                placeholder="请输入医疗机构名称检索"
                style="width: 200px;margin-right:10px;"
                v-if="identity != 5"
                clearable
            />
        </div>
        <div class="margin-up-down" v-if="identity != 5">
            <Button type="primary" icon="ios-search" @click="search" class="btn"></Button>
            <Button @click="cancel" class="btn">
                <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
            </Button>
        </div>
        <Modal
            v-model="modalStatus"
            :title="modalTitle"
            :closable="false"
            :mask-closable="false"
            :width = '550'
            :footer="null">
                <fourLevelLinkage
                    @changeProvince="changeProvince"
                    @changeCity="changeCity"
                    @changeArea="changeArea"
                    @changeHospital="changeHospital"
                    :province="province"
                    :city="city"
                    :area="area"
                    :hospital="hospital"
                    :isBack="isBack"
                    style="margin-bottom:15px;width:500px"
                ></fourLevelLinkage>
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <!-- 支付渠道 -->
                    <FormItem label="支付渠道" prop="paymentChannel">
                        <Select
                            class="w-select-hos"
                            placeholder="请选择支付渠道"
                            v-model="formValidate.paymentChannel"
                            style='width:180px;'
                            @on-change='paymentChannelChange'
                        >
                            <Option
                                v-for="item in paymentTypeList"
                                :value="item.id"
                                :key="item.id"
                                style='text-align:center;'
                            >{{item.name}}</Option>
                        </Select>
                    </FormItem>
                    <!-- 支付类型 -->
                    <FormItem label="支付类型" prop="paymentType">
                        <Select
                            class="w-select-hos"
                            placeholder="请选择支付类型"
                            v-model="formValidate.paymentType"
                            style='width:180px;'
                        >
                            <Option
                                v-for="item in paymentChannelList"
                                :value="item.code"
                                :key="item.code"
                                :disabled='item.disabled'
                                style='text-align:center;'
                            >{{item.name}}</Option>
                        </Select>
                    </FormItem>
                    <!-- 支付账号 -->
                    <FormItem label="支付账号" prop="appId" v-show='formValidate.paymentChannel != 3'>
                        <Select
                            class="w-select-hos"
                            placeholder="请选择支付账号"
                            v-model="formValidate.appId"
                            style='width:180px;'
                        >
                            <Option
                                v-for="item in paymentAccountList"
                                :value="item.appid"
                                :key="item.appid"
                                style='text-align:center;'
                            >{{item.nick}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="支付账号" v-show='formValidate.paymentChannel == 3' prop="appId">
                        <Select
                            class="w-select-hos"
                            placeholder="请选择支付账号"
                            v-model="formValidate.appId"
                            style='width:180px;'
                        >
                            <Option
                                v-for="item in paymentAccountList"
                                :value="item.appid"
                                :key="item.appid"
                                style='text-align:center;'
                            >{{item.nick}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="交易类型" prop="transactionType">
                        <Select
                            class="w-select-hos"
                            placeholder="请选择交易类型"
                            v-model="formValidate.transactionType"
                            style='width:180px;'
                        >
                            <Option
                                v-for="item in transactionTypeList"
                                :value="item.id"
                                :key="item.id"
                                style='text-align:center;'
                            >{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    <!-- 显示端 -->
                    <FormItem label="显示端" prop="displayType">
                        <Select
                            class="w-select-hos"
                            placeholder="请选择显示端"
                            v-model="formValidate.displayType"
                            style='width:180px;'
                        >
                            <Option
                                v-for="item in displayTypeList"
                                :value="item.id"
                                :key="item.id"
                                style='text-align:center;'
                            >{{item.name}}</Option>
                        </Select>
                    </FormItem>
                    <!-- 商户号 -->
                    <FormItem label="商户号" prop="merchantIdentification" v-show='formValidate.paymentChannel != 3'>
                        <Input :disabled="uploadList[0]" v-model="formValidate.merchantIdentification" placeholder="请输入商户号" style="width: 300px" />
                    </FormItem>
                    <FormItem label="商户号" v-show='formValidate.paymentChannel == 3'>
                        <Input :disabled="uploadList[0]" v-model="formValidate.merchantIdentification" placeholder="请输入商户号" style="width: 300px" />
                    </FormItem>
                    <!-- 商户名称 -->
                    <FormItem label="商户名称" prop="merchantName" v-show='formValidate.paymentChannel != 3'>
                        <Input :disabled="uploadList[0]" v-model="formValidate.merchantName" placeholder="请输入商户名称" style="width: 300px" />
                    </FormItem>
                    <FormItem label="商户名称" v-show='formValidate.paymentChannel == 3'>
                        <Input :disabled="uploadList[0]" v-model="formValidate.merchantName" placeholder="请输入商户名称" style="width: 300px" />
                    </FormItem>
                    <FormItem label="退款证书" v-show="formValidate.paymentChannel != 3">
                        <upload
                            v-model="uploadList"
                            :uploadUrl="uploadUrl"
                            :onDelete="onDelete"
                            :beforeUpload="beforeUpload" />
                    </FormItem>
                    <!-- 支付参数 -->
                    <FormItem label="支付参数" prop="parameterConfig" v-show='formValidate.paymentChannel != 3'>
                        <Input v-model="formValidate.parameterConfig" placeholder="请输入支付参数" style="width: 300px" />
                    </FormItem>
                    <FormItem label="支付参数" v-show='formValidate.paymentChannel == 3'>
                        <Input v-model="formValidate.parameterConfig" placeholder="请输入支付参数" style="width: 300px" />
                    </FormItem>
                    <FormItem label="状态" prop="startType">
                        <iSwitch v-model="formValidate.startType" size="large">
                            <span slot="open">启用</span>
                            <span slot="close">禁用</span>
                        </iSwitch>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <div :disabled='disabled' style="textAlign: center">
                        <Button type="primary" @click="handleSubmit('formValidate')" class="footerbtn">
                            <Icon type="ios-checkmark" style="margin-right: 5px" />确认
                        </Button>
                        <Button @click="cancel" class="footerbtn">
                            <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i> 取消
                        </Button>                  
                    </div>
                </div>
        </Modal>
        <Table stripe :columns="columns1" :data="list"></Table>
        <div class="page">
          <Page :total="homeSize" :current='pageNo' show-total show-elevator @on-change="pageChange"/>
      </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
import upload from "./components/upload";
import fourLevelLinkage from "@/components/fourLevelLinkage";
import cookie from "../../../utils/cookie.js";
export default {
    components: {
        upload,
        fourLevelLinkage
    },
    data() {
        return {
            province: null,
            city: null,
            area: null,
            hospital: null,
            isBack:1,
            // 上传相关
            uploadUrl: '',
            uploadList: [],
            modalTitle:"添加支付方式",
            modalStatus: false,
            val: '',
            // 数据
            formValidate: {
                // 支付渠道
                paymentType: "",
                // 支付类型
                paymentChannel: "",
                // 支付账号
                appName: "",
                appId: "",
                // 交易类型
                transactionType: "",
                // 显示端
                displayType: "",
                // 商户号
                merchantIdentification: "",
                merchantName: "",
                // 支付参数
                parameterConfig: "",
                // 状态
                startType: true
            },
            // 验证
            ruleValidate: {
                //支付渠道
                paymentType: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择支付渠道",
						// 触发事件
						trigger: "change"
					}
                ],
                // 支付类型
                paymentChannel: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择支付类型",
						// 触发事件
						trigger: "change"
					}
                ],
                // 支付账号
                appId: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择支付账号",
						// 触发事件
						trigger: "change"
					}
                ],
                // 交易类型
                transactionType: [
                    {
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择支付方式",
						// 触发事件
						trigger: "change"
					}
                ],
                // 显示端
                displayType: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择显示端",
						// 触发事件
						trigger: "change"
					}
                ],
                // 商户号
                merchantIdentification: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请输入商户号",
						// 触发事件
						trigger: "change"
					}
                ],
                merchantName: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请输入商户名称",
						// 触发事件
						trigger: "change"
					}
                ],
                // 支付参数
                parameterConfig: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请输入支付参数",
						// 触发事件
						trigger: "change"
					}
                ],
                // 状态
                startType: [
					{
						// 是否校验
						required: false,
						// 提示文字
						message: "请选择状态",
						// 触发事件
                        trigger: "change",
                        type:'boolean'
					}
				]
            },
            // 医院id
            hospitalId: '',
            // 医院名称
            name: "",
            // 支付方式列表
            list: [],
            columns1: [
                {
                    title: '排序',
                    key: 'sum',
                    align: 'center',
                    width: 60,
                    render: (h, params) => {
                        let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", sum);
                    }
                },
                {
                    title: '机构名称',
                    key: 'hospitalName',
                    align: 'center',
                    // width: 180,
                },
                {
                    title: "支付渠道",
                    align: "center",
                    key: "paymentChannelName",
                    width: 150,
                    render: (h, params) => {
                        let name = params.row;
                        return h("div", [
                            h(
                                "span",
                                {
                                    style: {
                                        display: "inline-block",
                                        width:
                                            params.column._width * 0.8 + "px",
                                        overflow: "hidden",
                                        textOverflow: "ellipsis",
                                        whiteSpace: "nowrap"
                                    }
                                },
                                name.paymentChannelName
                            )
                        ]);
                    }
                },
                {
                    title: "支付类型",
                    align: "center",
                    key:"paymentTypeName",
                    // width: 150,
                    render: (h, params) => {
                        let name = params.row;
                        return h("div", [
                            h(
                                "span",
                                {
                                    style: {
                                        display: "inline-block",
                                        width:
                                            params.column._width * 0.8 + "px",
                                        overflow: "hidden",
                                        textOverflow: "ellipsis",
                                        whiteSpace: "nowrap"
                                    }
                                },
                                name.paymentTypeName
                            )
                        ]);
                    }
                },
                {
                    title: "支付账号",
                    align: "center",
                    // width: 150,
                    key:"appName",
                    render: (h, params) => {
                        let name = params.row;
                        return h("div", [
                            h(
                                "span",
                                {
                                    style: {
                                        display: "inline-block",
                                        width:
                                            params.column._width * 0.8 + "px",
                                            overflow: "hidden",
                                            textOverflow: "ellipsis",
                                            whiteSpace: "nowrap"
                                    }
                                },
                                name.appName
                            )
                        ]);
                    }
                },
                {
                    title:"显示端",
                    align:'center',
                    key:"displayTypeName",
                    // width: 150,
                    render: (h, params) => {
                        let name = params.row;
                        return h("div", [
                            h(
                                "span",
                                {
                                    style: {
                                        display: "inline-block",
                                        width:
                                            params.column._width * 0.8 + "px",
                                        overflow: "hidden",
                                        textOverflow: "ellipsis",
                                        whiteSpace: "nowrap"
                                    }
                                },
                                name.displayTypeName
                            )
                        ]);
                    }
                },
                {
                    title:"商户号",
                    align:'center',
                    key:"merchantIdentification",
                    // width: 150,
                    render: (h, params) => {
                        let name = params.row;
                        return h("div", [
                            h(
                                "span",
                                {
                                    style: {
                                        display: "inline-block",
                                        width:
                                            params.column._width * 0.8 + "px",
                                        overflow: "hidden",
                                        textOverflow: "ellipsis",
                                        whiteSpace: "nowrap"
                                    }
                                },
                                name.merchantIdentification
                            )
                        ]);
                    }
                },
                {
                    title:"支付参数",
                    align:'center',
                    key:"parameterConfig",
                    // width: 150,
                    render: (h, params) => {
                        let name = params.row;
                        let par;
                        if(name.paymentType==4){
                            par = name.parameterConfig
                        }else{
                            par = JSON.parse(name.parameterConfig).mchKey || ''
                        }
                        return h("div", [
                            h(
                                "span",
                                {
                                    style: {
                                        display: "inline-block",
                                        width:
                                        params.column._width * 0.8 + "px",
                                        overflow: "hidden",
                                        textOverflow: "ellipsis",
                                        whiteSpace: "nowrap"
                                    }
                                },
                                par
                            )
                        ]);
                    }
                },
                {
                    title:"状态",
                    align:'center',
                    width: 80,
                    key:"startType",
                    render: (h, params) => {
                        let name = params.row;
                        let status = Boolean(name.status) ? "启用" :"禁用"
                        return h("div", [
                            h(
                                "span",{},
                                status
                            )
                        ]);
                    }
                },
                {
                    title: "设置",
                    align: "center",
                     width: 100,
                    render: (h, params) => {
                        let a = params.row;
                        return h("div", [
                            h(
                                "span",
                                {
                                    style: {
                                        color: " #5362E1",
                                    },
                                    on: {
                                        click: () => {
                                            this.addPayment('formValidate',params.row.id,params.row.hospitalId)
                                        }
                                    },
                                    
                                },
                                "编辑"
                            )
                        ]);
                    }
                }
            ],
            // 支付渠道列表
            paymentTypeList: [],
            // 支付类型列表
            paymentChannelList: [],
            // 支付账号列表
            paymentAccountList: [],
            // 交易类型列表
            transactionTypeList: [],
            // 显示端列表
            displayTypeList: [],
            // 就诊卡表单
            cart : {
                paymentType: [ { required: true, message: "请选择支付类型", trigger : "change"} ],
                paymentChannel: [ { required: true, message: "请选择支付渠道", trigger: "change"} ],
                displayType: [ {required: true, message: "请选择显示端", trigger: "change"} ],
                transactionType: [ { required: true, message: "请选择交易类型", trigger: "change" } ],
            },
            // 全部表单
            stop : {
                //支付类型
                paymentType: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择支付类型",
						// 触发事件
						trigger: "change"
					}
                ],
                // 支付渠道
                paymentChannel: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择支付渠道",
						// 触发事件
						trigger: "change"
					}
                ],
                // 支付账号
                appId: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择支付账号",
						// 触发事件
						trigger: "change"
					}
                ],
                // 交易类型
                transactionType:[
                    {
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择支付方式",
						// 触发事件
						trigger: "change"
					}
                ],
                // 显示端
                displayType: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请选择显示端",
						// 触发事件
						trigger: "change"
					}
                ],
                // 商户号
                merchantIdentification: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请输入商户号",
						// 触发事件
						trigger: "blur"
					}
                ],
                merchantName: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请输入商户名称",
						// 触发事件
						trigger: "blur"
					}
                ],
                // 支付参数
                parameterConfig: [
					{
						// 是否校验
						required: true,
						// 提示文字
						message: "请输入支付参数",
						// 触发事件
						trigger: "blur"
					}
                ],
                // 状态
                startType: [
					{
						// 是否校验
						required: false,
						// 提示文字
						message: "请选择状态",
						// 触发事件
                        trigger: "change",
                        type:'boolean'
					}
				]
            },
            disabled: false,
            homeSize: 10,
            pageSize: 10,
            pageNo:1,
            identity: ''
        };
    },
    created() {
        this.identity = cookie.getCookie("idtt");
        this.province = this.$route.query.provinceCode
            ? parseInt(this.$route.query.provinceCode)
            : null;
        this.city = this.$route.query.cityCode
            ? parseInt(this.$route.query.cityCode)
            : null;
        this.area = this.$route.query.areaCode
            ? parseInt(this.$route.query.areaCode)
            : null;
        this.hospital = this.$route.query.hospitalId
            ? parseInt(this.$route.query.hospitalId)
            : null;
        this.isBack = this.$route.query.isBack
            ? parseInt(this.$route.query.isBack)
            : 1;
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/maintain/systemManagement/index",
                title: "帐号权限配置"
            },
            {
                path: "/index/maintain/payment/index",
                title: "支付管理"
            }
        ];
        this.$emit("changeBreadList", breadList);
         // 加载医院账号
        this.loadingData()
    },
    mounted () {
        // 加载医院列表数据
        this.loadingHospitalId(1);
    },
    methods: {
        changeProvince(val) {
            this.province = val;
        },
        changeCity(val) {
            this.city = val;
        },
        changeArea(val) {
            this.area = val;
        },
        changeHospital(val) {
            this.hospital = val;
        },
        onDelete () {
            if (this.formValidate.id) {
                this.$axios.post(api.deleteCert,{id: this.formValidate.id}).then(res => {
                    if(Boolean(res.data.code)) {
                        this.$Message.success("删除成功")
                        this.clearUploadList();
                    } else {
                        this.$Message.error("修改失败")
                    }
                });
            } else {
                this.uploadList = [];
            }
        },
        clearUploadList() {
            this['uploadList'] = [];
        },
        beforeUpload() {
            if (this.formValidate.merchantIdentification) {
                return true;
            } else {
                this.$Message.error('请先填写商户号');
                return false;
            }
            if (this.formValidate.merchantName) {
                return true;
            } else {
                this.$Message.error('请先填写商户名称');
                return false;
            }
        },
        // 返回
        back(){
            let pageNo = this.$route.query
            this.functionJS.queryNavgationTo(
                this,
                "/index/maintain/payment/index",
                pageNo
            );
        },
        // 支付渠道配置
        handleSubmit (name) {
            this.disabled = true
            this.$refs[name].validate((valid) => {
                // 必填项填写完整
                if (valid) {
                    // 参数
                    let mchKey 
                    if(this.formValidate.paymentType==4){
                        mchKey = this.formValidate.parameterConfig
                    }else{
                        mchKey = {
                            mchKey: this.formValidate.parameterConfig
                        }
                        mchKey = JSON.stringify(mchKey)
                    }
                    this.paymentAccountList.forEach(i =>{
                        if(i.appid == this.formValidate.appId){
                            this.formValidate.appName = i.nick
                        }
                    })
                    let params = {
                        paymentType: this.formValidate.paymentType,
                        channel: this.formValidate.paymentChannel,
                        appName: this.formValidate.appName,
                        appId: this.formValidate.appId,
                        displayType: this.formValidate.displayType,
                        merchantIdentification: this.formValidate.merchantIdentification,
                        merchantName: this.formValidate.merchantName,
                        parameterConfig: mchKey,
                        status: Number(this.formValidate.startType),
                        transactionType:this.formValidate.transactionType,
                        hospitalId: this.hospitalId,
                    };                   
                    params.provinceCode = this.province ? this.province : null;
                    params.cityCode = this.city ? this.city : null;
                    params.areaCode = this.area ? this.area : null;
                    params.hospitalId = this.hospital ? this.hospital : null;
                    params.isBack = 2
                    this['uploadList'][0] && (params.certId = this['uploadList'][0].res)
                    // 有id代表它是编辑的状态
                    if (Boolean(this.formValidate.id)) {
                        this.updateList(params)
                    } else {
                        this.saveChange(params);
                    }
                    this.cancel()
                } else {
                    this.$Message.error('请检查必填项是否填写正确');
                    return false;
                }
            })
        },
        //修改支付方式
        addPayment (name,id,hospitalId) {
            this.modalStatus = true;
            this.formValidate.id = ''
            this.$refs[name].resetFields();
            this.modalTitle = '添加支付方式'
            // 当有id时表示它是从编辑页跳转过来的
            if(Boolean(id) || hospitalId) {
                this.modalTitle = '修改支付方式'
                this.formValidate.id = 1             
                this.$axios.post(api.findChannelById, {
                    id
                }).then(res => {
                    if (res.data.message) {
                        let ret = res.data.object;
                        let config;
                        if(ret.paymentType==4){
                            config = ret.parameterConfig
                        }else{
                            config = JSON.parse(ret.parameterConfig).mchKey
                        }
                        // 支付类型
                        this.formValidate.paymentType = String(ret.paymentType)
                        // 支付渠道
                        this.formValidate.paymentChannel = String(ret.channel)
                        // 通过支付类型,加载支付渠道
                        this.paymentChannelChange()
                        // 支付账号
                        this.formValidate.appName = ret.appName
                        this.formValidate.appId = ret.appId
                        // 交易类型
                        this.formValidate.transactionType = ret.transactionType
                        // 显示端
                        this.formValidate.displayType = String(ret.displayType)
                        // 商户号
                        this.formValidate.merchantIdentification = ret.merchantIdentification
                        this.formValidate.merchantName = ret.merchantName
                        // 支付参数
                        this.formValidate.parameterConfig = config
                        // 状态
                        this.formValidate.startType = Boolean(ret.status)
                        this.formValidate.id = ret.id;
                        // 回显地区
                        this.province = ret.provinceId ? ret.provinceId : null;
                        this.city = ret.cityId ? ret.cityId : null;
                        this.area = ret.areaId ? ret.areaId : null;
                        this.hospital = ret.hospitalId ? ret.hospitalId : null;
                        if (ret.certId) {
                            this.clearUploadList();
                            this['uploadList'].push({status: 'finished', res: ret.certId});
                        }
                    } else {
                        this.$Message.error("查询详情失败")
                    }
                })

                this.$axios
                    .post(api.mechanismregSearch, {
                        id: hospitalId,
                    })
                    .then(res => {
                    if (res.data.code === 1) {
                        // 利用返回数据填充 前端数据
                        const ret = JSON.parse(JSON.stringify(res.data.object));
                        // 省市区反显
                        this.province = String(ret.provinceCode);
                        this.city = String(ret.cityCode);
                        this.area = String(ret.districtCode);
                        this.hospital = ret.id
                    } else {
                        this.$Message.error(ret.data.message);
                    }
                });
            }
        },
        // 选择支付类型后加载支付渠道
        paymentChannelChange() {
            // 当选择就诊卡的表单验证选择
            if(Number(this.formValidate.paymentChannel) == 3) {
                this.ruleValidate = this.cart
            } else {
                this.ruleValidate = this.stop
            }
            this.paymentChannelList = []
            if(this.formValidate.paymentChannel) {
                this.$axios.post(api.paymenttypeMap, {
                    channel:this.formValidate.paymentChannel
                }).then(res => {
                    if (res.data.success) {
                        let ret = res.data.object
                        this.paymentChannelList = ret
                        this.onListLoading();
                    } else {
                        this.$Message.error('通过支付类型加载支付渠道失败')
                    }
                })
            }
            
        },
        // 取消
        cancel () {
            this.formValidate.paymentType = ''
            this.formValidate.paymentChannel = ''
            this.formValidate.appName = ''
            this.formValidate.appId = ''
            this.formValidate.transactionType = ''
            this.formValidate.displayType = ''
            this.formValidate.merchantIdentification = ''
            this.formValidate.merchantName = ''
            this.formValidate.parameterConfig = ''
            this.formValidate.startType = false;
            this.$refs['formValidate'].resetFields();
            // 清空支付渠道
            this.paymentChannelList = [];
            this.modalStatus = false;
            this.province = ''
            this.city = '';
            this.area = '';
            this.hospital = ''
            this.val = ''
            this.loadingHospitalId(1,this.val);
        },
        // 
        loadingData () {
            // 获取支付账号
            this.$axios.post(api.WxApp, {
                hospitalId:this.hospitalId
            }).then(res => {
                if(res.data.message) {
                    let ret = res.data.object;
                    this.paymentAccountList = ret
                } else {
                    this.$Message.error("加载医院关联公众号失败,请重试")
                }
            })
            // 获取支付类型,显示端,医院账号,交类型
            this.$axios.post(api.paymentMap,{               
            }).then(res => {
                if(res.data.success) {
                    let ret = res.data.object;
                    this.displayTypeList = ret.displayEnum || []
                    this.paymentTypeList = ret.paymentEnum || []
                    this.transactionTypeList = ret.transaction || []
                    if(this.paymentTypeList != []){
                        this.paymentTypeList.forEach(item => {
                            item.disabled = false
                        })
                    }                   
                    this.onListLoading()
                } else {
                    this.$Message.error("加载支付类型与显示端失败,请重试")
                }
            })
        },
        // 禁用已选择的支付渠道
        onListLoading() {
            if(this.paymentChannelList != []){
                    this.paymentChannelList.forEach(item => {
                    item.disabled = false
                })
            }       
            this.list.forEach(item => {
                this.paymentChannelList.forEach(s => {
                    if (Number(item.paymentChannel) == Number(s.code)) {
                        s.disabled = true
                    }
                })
            })
        },
        search() {
            this.list.forEach((item,index) =>{
                if(this.val == item.hospitalName){
                    this.hospital = item.hospitalId
                }
            })
            this.loadingHospitalId(1, this.val);
        },
        // 加载医院支付方式列表
        loadingHospitalId (pageNo, val) {
            this.pageNo = pageNo;
            let params = {
                pageNo: pageNo,
                pageSize: 10
            };
            if (Boolean(val)) {
                params.hospitalName = val.trim();
            }
            params.provinceCode = this.province ? this.province : null;
            params.cityCode = this.city ? this.city : null;
            params.areaCode = this.area ? this.area : null;
            params.hospitalId = this.hospital ? this.hospital : null;
            params.isBack = 2
            this.$axios.post(api.payment, params).then(res => {
                if(res.data.success) {
                    let ret = res.data.object;
                    this.homeSize = res.data.object.total;
                    if(ret.records){
                        ret.records.forEach((item,index) =>{
                            item.sum = this.addZeros(index)
                            if(val == item.hospitalName){
                                this.hospitalId = item.hospitalId
                            }
                        })
                        this.list = ret.records || []
                    } else {
                        this.list = []
                    }                   
                } else {
                    this.$Message.error("加载医院支付方式列表失败,请重试")
                }
            })
        },
        // 新增支付类型
        saveChange (params) {
            console.log(params)
            this.$axios.post(api.insertHospitalPayment, params).then(res => {
                if(Boolean(res.data.code)) {
                    let ret = res.data.object
                    this.$Message.success(ret.success)
                    this.$refs['formValidate'].resetFields();
                    this.ruleValidate = this.stop;
                    setTimeout(() => {
                        this.disabled = false             
                    }, 1000);
                    this.modalStatus = false;
                    this.loadingHospitalId(1)
                } else {
                    let message = res.data.object.same || "添加失败,请重试"
                    this.$Message.error(message)
                }
            })
        },
        // 修改支付类型
        updateList (params) {
            params.id = this.formValidate.id;
            this.$axios.post(api.updateHospitalPayment, params).then(res => {
                if(Boolean(res.data.code)) {
                    this.$Message.success("修改成功");
                    this.$refs['formValidate'].resetFields();
                    this.ruleValidate = this.stop;
                    setTimeout(() => {
                        this.disabled = false             
                    }, 1000);
                    this.modalStatus = false;
                    this.loadingHospitalId(1)
                } else {
                    this.$Message.error("修改失败")
                }
            })
        },
        //分页
        pageChange(index) {
            this.loadingHospitalId(index, this.val);
        },
    },
    watch: {
        'formValidate.merchantIdentification'(n) {
            let url = api.uploadCert;
            this.uploadUrl = url.replace('{id}', n);
        },
        modalStatus(n) {
          if (!n) {
              this.clearUploadList();
          }
        }
    }
};
</script>
<style lang="less" scoped>
.management1 {
    width: calc(100% );
    padding: 10px 30px;
    margin: 0 auto;
    background: #fff;
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .btn {
        width: 51px;
        height: 32px;
    }
    .page{
      text-align: center;
      margin: 20px 0;
    }
}
.footerbtn {
    width: 75px;
    height: 35px;
}
/deep/ .ivu-modal-wrap {
    .ivu-modal{
        float:right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
}
</style>
